<template>

	<view class="section">
		<!-- tab -->
		<view class="nav">
			<scroll-view class="tabs" scroll-x="true" scroll-with-animation :scroll-left="posi" @scroll="scroll">
				<template v-for=" (item,index) in tablist">
					<view class="tabs-item" :key="index" :class="{'active' :selectIndex===index}"
						@click="chenked(item, index)">
						{{item.title}}
					</view>
				</template>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			tablist: Array,
			defaultSelectIndex: 0
		},
		data() {
			return {
				posi: 0,
				selectIndex: 0
			}
		},
		mounted() {
			// setTimeout(() => {
			// 	this.posi = 100
			// }, 2000)
		},
		methods: {
			scroll(e) {},
			chenked(item, index) {
				this.posi = (index * 100) - 140
				this.selectIndex = index
				this.$emit("select", item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		width: 100%;

		.tabs {
			width: 100vw;
			white-space: nowrap;
			overflow-x: scroll;

			.tabs-item {
				box-sizing: border-box;
				width: 100px;
				// border: 1px solid red;
				display: inline-block;
				text-align: center;
				padding: 10px 10px;
				border-right: 1px solid #ccc;

				.active {
					border-bottom: 2px solid green;
				}
			}
		}
	}
</style>